<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>简易换肤案例</title>
</head>

<body>
  <input type="color" />
  <script>
    /* 
    1 打开页面的时候 去获取本地存储中的 提前存好的颜色
    2 把颜色设置给body标签
    
    3 当我们选中了某个颜色的同时 还要把颜色 存一份到 本地存储中 
    
     */

    // 获取元素
    const input = document.querySelector('input');

    // 获取颜色 设置给body标签
    document.body.style.backgroundColor = localStorage.getItem('color');

    // 绑定事件  值改变事件
    input.addEventListener('change', function () {
      // console.log(input.value);

      document.body.style.backgroundColor = input.value;

      // 存一份颜色 下来
      localStorage.setItem('color', input.value);
    });
  </script>
</body>

</html>